Classwork 3: Personalized Flutter App
By Drashya Patel on 2024-12-12T10:24-05:00
Tags: No Tags
Objective:
- Build a personalized Flutter app that displays:
- Your Name
- Banner ID
- Class and Section
- A Favorite Quote
- Test and run the app using both the default Android emulator and an external emulator.
Instructions:
-
Set Up Flutter and Android Emulator:
- Install Flutter by following the Flutter Installation Guide.
- Install the Flutter plugin for your IDE (VS Code or Android Studio).
- Install an external emulator (e.g., Genymotion, Bluestacks, Nox Player) and set it up to run Flutter apps.
-
App Requirements:
- The app should display the following:
- Your Name
- Banner ID
- Class and Section
- Your Favorite Quote
- Personalize the layout with colors, fonts, and a background image.
- The app should display the following:
-
Run the App:
- Test your app in both the default Android emulator and the external emulator.
-
Submit:
- Compress and submit the Flutter project files as a ZIP.
- Write a report containing:
- App code.
- Screenshots of the app running on both emulators.
- A reflection on the process, challenges, and learnings.
Tasks to Complete:
-
App Design:
- Create a neat layout using Flutter widgets such as
Text
,Column
, andImage
. - Add customization with
BoxDecoration
,Padding
, andAlignment
.
- Create a neat layout using Flutter widgets such as
-
Run the App on Android Studio Emulator:
- Test and capture screenshots of the app running on the default Android emulator.
-
Run the App on an External Emulator:
- Test and capture screenshots of the app running on an external emulator.
-
Reflection:
- Write a paragraph comparing the Flutter app development process to previous classwork.
What I Did:
- Created the app using Flutter in Visual Studio Code.
- Added widgets for text and images, including a Durham College logo and a background image.
- Customized the UI with Dart code for padding, alignment, and styling.
- Tested the app on both the Android Studio emulator and Bluestacks.
Screenshots:
- Flutter app code in Visual Studio Code:
- App running in the default emulator:
- App running in an external emulator (Bluestacks):
Reflection: The process of building a Flutter app was both challenging and rewarding. Setting up Flutter and resolving initial issues required troubleshooting, but once resolved, coding in Dart became an enjoyable experience. Compared to Android Studio, Flutter offers cross-platform compatibility, which is a significant advantage. However, designing in Flutter requires more effort as everything needs to be hardcoded. This project strengthened my understanding of Dart and Flutter, and I feel more confident in using these tools for cross-platform development.